<template>
  <div class="list">
    <!-- 动态显示已转译和待转译的数量 -->
    <div class="stats">
      <div>
        <span>已转译:</span>
        <span>{{ completedCount }}</span>
      </div>
      <div>
        <span>待转译:</span>
        <span>{{ unclaimedCount }}</span>
      </div>
      <!-- <el-text class="mx-1" type="success">已转译: {{ completedCount }}</el-text>
      <el-text class="mx-1" type="warning">待转译: {{ unclaimedCount }}</el-text> -->
    </div>

    <!-- 静态任务列表 -->
    <ul class="left-task-list">
      <li v-for="(item, index) in taskList" :key="index" class="task-item">
        <img src="./1.png" alt v-if="index ==0" />
        <img src="./2.png" alt v-if="index ==1" />
        <img src="./3.png" alt v-if="index ==2" />
        <span v-if="index>2">{{ index + 1 }}.&nbsp;&nbsp;&nbsp;</span>
        <a :href="item.link" target="_blank" class="namee">{{ item.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { TaskApi } from '@/api/task.ts'

// 静态任务数据
const taskList = ref([
  { name: 'cURL', link: 'https://github.com/curl/curl' },
  { name: 'ZeroMQ', link: 'https://github.com/zeromq/libzmq' },
  { name: 'PCRE2', link: 'https://github.com/PhilipHazel/pcre2' },
  { name: 'Expat', link: 'https://github.com/libexpat/libexpat' },
  { name: 'JSON-C', link: 'https://github.com/json-c/json-c' },
  { name: 'LuaJIT', link: 'https://github.com/luajit/luajit' },
  {
    name: 'SQLite Amalgamation',
    link: 'https://github.com/sqlite/sqlite-amalgamation'
  },
  { name: 'cJSON', link: 'https://github.com/DaveGamble/cJSON' },
  { name: 'OpenSSL', link: 'https://github.com/openssl/openssl' },
  { name: 'Lua', link: 'https://github.com/lua/lua' }
])

// 模拟完成与待转译数量（这里可以根据业务需求调整）
const completedCount = ref()
const unclaimedCount = ref()

const taskCount = async () => {
  try {
    const response = await TaskApi.taskCount() // 调用 taskList 接口
    console.log('动态显示已转译和待转译的数量', response)
    completedCount.value = response.data.completedCount
    unclaimedCount.value = response.data.unclaimedCount
  } catch (error) {
    console.error('获取任务列表失败:', error)
  }
}

// 组件挂载时可根据需要初始化数据（当前静态任务无须额外逻辑）
onMounted(() => {
  taskCount()

  console.log('任务列表加载完成')
})
</script>

<style lang="less" scoped>
.list {
  width: 300px;
  min-height: 600px;
  background: #d6edff;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  //justify-content: space-between;

  .stats {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    div{
      display: flex;
      justify-content: space-between;
    }

    .el-text {
      margin-bottom: 10px;
    }
  }

  .left-task-list {
    background: #fff;
    min-height: 500px;
    border-radius: 10px;
    padding: 10px;
    overflow-y: auto;

    .task-item {
      list-style: none;
      line-height: 30px;
      padding: 0 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      span {
        padding-left: 5px;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
      .namee {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      a {
        color: #0366d6;
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
